<%--
  Created by IntelliJ IDEA.
  User: taohj
  Date: 2015/1/7
  Time: 14:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div title=" &nbsp;分类算法&nbsp; " data-options="closable:false" style="padding: 6px 6px 0 6px;">


    <div style="padding-left: 10px;border: 1px solid rgb(221,221,221);padding-top: 10px;  ">
        <div>分类器选择</div>
        <div style="min-height: 40px;padding: 6px">

            <div>
                <a class="easyui-linkbutton" style="width: 60px" name="classify_choose">选择</a>&nbsp;
                <input id="classify_choose_view_input" name="classify_choose_view_input" class="easyui-textbox"
                       data-options="editable:false,width:600"/>
                <input name="classify_choose_classify_class" type="hidden"/>

            </div>

        </div>
    </div>


    <div style="height: 450px;padding-left: 0px;float: left;margin-top: 10px;">
        <div style="width: 240px;border: 1px solid  rgb(221,221,221);padding-bottom: 6px;">
            <div style="padding: 6px 0px 6px 10px;">测试选项</div>
            <div>
                <input type="radio"> 使用训练集 <br/>
                <input type="radio"> 供测试集 <br/>
                <input type="radio"> 交叉验证 <br/>
                <input type="radio"> 使用部分作为训练集 <br/>
                <a class="easyui-linkbutton" style="width: 220px;margin-left: 8px;margin-top: 10px;">更多选项</a>
            </div>
        </div>

        <div style="padding: 10px 0 10px 0;">
            <select class="easyui-combobox" style="width: 240px;height: 26px;" data-options="editable:false">
                <option>目标变量</option>
            </select>
        </div>

        <div style="padding: 0px 0 0 0;">
            <a id="classify_start_btn" class="easyui-linkbutton" style="width: 110px;margin-left: 8px;">开始</a>
            <a class="easyui-linkbutton" style="width: 110px;margin-left: 8px;">停止</a>
        </div>

        <div>
            <div style="padding: 6px 0 0 10px;height: 24px;">输出结果</div>
            <div>
                <input class="easyui-textbox" data-options="multiline:true,editable:false"
                       style="width: 240px;height: 190px;">
            </div>
        </div>

    </div>

    <div style="width: 700px;float: right;border: 1px solid rgb(221,221,221);margin-top: 10px;padding: 4px">
        <div style="padding: 8px 0 0 10px;height: 24px;">分类器输出结果</div>
        <div>
            <input class="easyui-textbox" data-options="multiline:true,editable:false"
                   id="classify_result_view_input"
                   style="width: 100%;height: 400px;">
        </div>
    </div>


</div>

<script>
    $(function () {
        var classifyTab = context.tabs.tabs("getTab", "分类算法");
        context.classifyTab = classifyTab;
        //分类算法 选择按钮 点击事件
        classifyTab.find("a[name=classify_choose]").on("click", function () {
            var dialog = $("<div><div></div></div>");
            var tree = dialog.find("div");
            dialog.dialog({
                title: '选择算法',
                width: 400,
                height: 400,
                closed: false,
                cache: false,
                modal: true,
                top: 120,
                buttons: [
                    {
                        text: '确定',
                        handler: function () {
                            var node = tree.tree("getSelected");
                            classifyTab.find("input[name=classify_choose_classify_class]").val(node.id);
                            var defalultParam = context.getDefalultParamsStr(classifyTab, node.id);
                            classifyTab.find("#classify_choose_view_input").textbox("setValue", node.text + defalultParam);
                            dialog.dialog("close");
                        }
                    },
                    {
                        text: '取消',
                        handler: function () {
                            dialog.dialog("close");
                        }
                    }
                ]
            });

            tree.tree({
                url: 'resources/js/data/classifiers.json'
            });

          /*  tree.tree("collapseAll",tree.target);*/

        });

        //分类算法参数 算法说明
        classifyTab.find("input[name=params]").closest("div").find("a:last-child").on('click', function () {
            var title = classifyTab.find("#classify_choose_view_input").textbox("getValue");
            var classes = classifyTab.find("input[name=classify_choose_classify_class]").val();
            context.viewdocs(classifyTab, title, classes);
        });

        // //分类算法 开始按钮 点击事件
        var classify_start_btn = classifyTab.find("#classify_start_btn").on("click", function () {
            var classify_result_view_input = classifyTab.find("#classify_result_view_input");
            classify_result_view_input.textbox("setValue", "");
            var classifyer = classifyTab.find("input[name=classify_choose_classify_class]").val();
            var viewValue = classifyTab.find("#classify_choose_view_input").textbox("getValue");
            var option = "";
            var index = viewValue.indexOf(" -");
            if (index > 1) {
                option = viewValue.substr(index);
            }
            $.post("classifyServlet", {action: "start", classifyer: classifyer, option: option}, function (data) {
                classify_result_view_input.textbox("setValue", data);
            });
        });

        $.get("resources/js/docs/classifiers.json", {}, function (data) {
            classifyTab.params = data;

            var viewInput = classifyTab.find("#classify_choose_view_input");
            var classInput = classifyTab.find("input[name=classify_choose_classify_class]");
            context.setParams(classifyTab, classInput, viewInput)
        }, "json");

    });
</script>